<template>
  <el-dialog
    v-model="dialogVisible"
    v-bind="options"
    class="product-dialog"
    @close="cancelFn"
  >
    <div>
      <el-row :gutter="20">
        <!--供应商列表-->
        <el-col :span="24">
          <div class="mb6">
            <div class="inline-block align-top float-right">
              <el-form
                :model="queryParams"
                ref="queryRef"
                :inline="true"
                label-width="0"
                @submit.prevent
                @keyup.enter="handleQuery"
              >
                <el-form-item prop="supplierName">
                  <el-input
                    v-model="queryParams.supplierName"
                    placeholder="输入供应商名称"
                    clearable
                    style="width: 200px"
                    @blur="handleQuery"
                  />
                </el-form-item>
                <el-form-item prop="supplierTaxcode">
                  <el-input
                    v-model="queryParams.supplierTaxcode"
                    placeholder="输入供应商税号"
                    clearable
                    style="width: 200px"
                    @blur="handleQuery"
                  />
                </el-form-item>
              </el-form>
            </div>
          </div>

          <el-table
            ref="table"
            v-loading="loading"
            :data="dataList"
            row-key="supplierNumber"
            border
            stripe
            current-row-key="supplierNumber"
            @row-click="rowClick"
          >
            <el-table-column width="55" align="center">
              <template #default="scope">
                <span :class="[rowCalss(scope.row)]"></span>
              </template>
            </el-table-column>
            <el-table-column prop="supplierName" label="供应商名称">
            </el-table-column>
            <el-table-column
              prop="supplierTaxcode"
              label="供应商税号"
              width="190"
            >
            </el-table-column>
            <el-table-column
              prop="supplierNumber"
              label="供应商编号"
              width="150"
            >
            </el-table-column>
          </el-table>

          <pagination
            v-show="total > 0"
            :total="total"
            class="mr-4 relative"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            v-model:pageSizes="pageSizes"
            @pagination="getList"
          />
        </el-col>
      </el-row>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogBtnOk">确定</el-button>
        <el-button @click="cancelFn"> 取消 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup name="SelectA8Supplier">
import { reactive, toRefs, ref } from 'vue'
import {
  listSupplierA8 //弹窗列表接口
} from '@/api/supplierManage/index'
const props = defineProps({
  dialogParam: {
    type: Object,
    require: false,
    default: () => {
      return {
        options: {},
        productQuery: {}
      }
    }
  }
})
const emit = defineEmits(['ok'])
const { proxy } = getCurrentInstance()
const dialogVisible = ref(false)
const data = reactive({
  loading: false,
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    categoryId: undefined, //供应商分类
    keyword: undefined //关键词
  },
  dataList: [],
  selectArr: [],
  total: 0,
  options: {
    width: '60%',
    title: '供应商选择',
    multiple: false
  }
})

let { loading, selectArr, total, queryParams, dataList, options } = toRefs(data)
const pageSizes = computed(() =>
  queryParams.value.pageSize === 6 ? [6, 10, 20, 30, 50] : [10, 20, 30, 50]
)
watch(
  () => props.dialogParam,
  () => {
    console.log('props.dialogParam==>', props.dialogParam)
    options.value = { ...options.value, ...props.dialogParam.options }
    queryParams.value = {
      ...queryParams.value,
      ...props.dialogParam.productQuery
    }
  },
  {
    deep: true,
    immediate: true
  }
)
async function init() {
  await getList()
}
/** 搜索按钮操作 */
function handleQuery() {
  //   console.log('检索')
  getList()
}
// 获取数据列表
async function getList() {
  loading.value = true

  try {
    let res = await listSupplierA8(queryParams.value)
    loading.value = false
    dataList.value = res.rows
    total.value = res.total
    // console.log('弹窗列表dataList.value==>', dataList.value)
  } catch (error) {
    // console.log('error==>', error.toString().replace('Error:', ''))
    loading.value = false
  }
}

// 单击行
function rowClick(row, column, event) {
  // 根据id判断当前点击的是否被选中
  const selected = selectArr.value.some(
    item => item.supplierNumber === row.supplierNumber
  )
  if (!selected && options.value.multiple) {
    // 选择
    selectArr.value.push(row)
    proxy.$refs.table.toggleRowSelection(row, true)
  } else if (!selected && !options.value.multiple) {
    // 选择
    selectArr.value = [row]
    proxy.$refs.table.toggleRowSelection(row, true)
  } else {
    // 取消
    let finalArr = selectArr.value.filter(item => {
      return item.supplierNumber !== row.supplierNumber
    })
    // 取消后剩余选中的
    selectArr.value = finalArr
    proxy.$refs.table.toggleRowSelection(row, false)
  }
}
// 选中行样式
const rowCalss = computed(() => {
  return function (row) {
    let select = selectArr.value.some(
      e => e.supplierNumber == row.supplierNumber
    )
    return select
      ? 'i-ic-baseline-check-box text-blue-500'
      : 'i-ic-baseline-check-box-outline-blank'
  }
})

function dialogBtnOk() {
  let select = selectArr.value.map(e => {
    return { ...e, id: '' }
  })
  if (selectArr.value.length == 0) {
    proxy.$message.error('请选择供应商！')
    return
  }
  emit('ok', select)
  cancelFn()
}
// 取消
function cancelFn() {
  selectArr.value = []
  emit('update:modelValue', false)
}

init()
</script>

<style scoped>
.box-card {
  min-height: 85vh;
}
.box-card-dia {
  min-height: 100%;
}
.custom-tree-node {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.custom-tree-node .node-title {
  flex-grow: 8;
}
.custom-tree-node .node-btn {
  display: none;
  flex-grow: 1;
}
.el-tree-node__content:hover .node-btn {
  display: block;
}
.avatar-uploader:deep(.el-upload) {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader:deep(.el-upload:hover) {
  border-color: #409eff;
}
.avatar-uploader-icon i {
  font-size: 30px;
}
</style>
